<template>
  <footer id="footer">
    <div class="out">
      <!-- 顶部 -->
      <div class="footer_top">
        <dl>
          <dt>马蜂窝旅游网</dt>
          <dd v-for="(items,index) in topList.intro" :key="index" v-html="items"></dd>
        </dl>
        <dl class="footer_top_about">
          <dt>关于我们</dt>
          <a
            href="http://www.8264.com/"
            v-for="(items,index) in topList.about"
            :key="index"
            v-html="items"
          ></a>
        </dl>
        <dl class="footer_top_server">
          <dt>旅行服务</dt>
          <li>
            <a
              href="http://www.8264.com/"
              v-for="(items,index) in topList.server"
              :key="index"
            >{{items}}</a>
          </li>
          <a href="http://www.8264.com/">
            <span class="colorFont">旅行商城全球商家入驻</span>
          </a>
        </dl>
        <dl class="footer_top_QRcode">
          <dd v-for="(items,index) in topList.QRcode" :key="index">
            <img :src="items.img" alt />
            <p v-html="items.p"></p>
          </dd>
        </dl>
      </div>
      <!-- 第三方 -->
      <div class="footer_social">
        <p>旅游之前，先上马蜂窝！</p>
        <a
          v-for="(items,index) in topList.thirdParty"
          :key="index"
          :href="items.src"
          :style="getBackground(index)"
        ></a>
      </div>
      <!-- 中部 -->
      <div class="footer_mid">
        <a v-for="(item,index) in midList" :href="item.aSrc" :key="index">{{item.aName}}</a>
        <a href="javascript:;">查看更多友情链接>></a>
      </div>
    </div>
  </footer>
</template>

<script>
import vuex, { mapState } from "vuex"
export default {
  data() {
    return {
      tpList: [],
    };
  },
  computed: {
    ...mapState(['topList','midList'])
  },
  methods: {
    getBackground(index) {
      //精灵图定位
      var position = this.topList.thirdParty[index].position;
      return (
        "background: url('https://css.mafengwo.net/images/mfw-footer-sprite7.png')" +
        position
      );
    },
    getData() {
      this.$store.dispatch('reqFooterData')
      // this.$api.getFooterData().then(succ => {
      //   this.topList = succ.top;
      //   this.midList = succ.mid;
      // });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style  scoped>
/* 样式表 */
@import "../assets/css/Footer.css";

/* 插入的元素样式 橙色字体 */
.footer_bottom span >>> img {
  height: 12px;
  width: 12px;
}
.out >>> .colorFont {
  color: #ff9d00;
  margin-left: 2px;
}
.out >>> a {
  color: #c2c2c2;
  text-decoration: none;
  margin-right: 8px;
}
.out >>> a:hover {
  color: white;
  text-decoration: none;
}
</style>